<template>
  <div class="home wrapper">
    <navbar>
      <template #center>首页</template>
    </navbar>
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
      :pull-up-load="true"
      @pullingUp="loadMore"
      :observeImage="true"
    >
    <!-- 轮播图 -->
    <myswiper></myswiper>
    
    <!-- 推荐组件 -->
    <recommends></recommends>
    <!-- 本周流行 -->
    <FeatureView></FeatureView>
    <!-- 分类导航栏 -->
    <tab-control
      class="tab"
      :titles="titles"
      @tabClick="tabClick"
      :class="{ 'fix-tab': TabrFixed }"
    ></tab-control>
     
    <!-- 商品展示 -->
      <Goods-list :goods="showGoods"></Goods-list>
      <div style="margin-top: 30px">加载中.......</div>
    </scroll>
  </div>
  <!-- 回到顶部按钮 -->
  <back-top></back-top>
</template>

<script>
// navbar
import navbar from "../../components/common/navbar/navbar.vue";
// swiper
import Myswiper from "./myswiper.vue";

//推荐
import recommends from "./HomeRecommendView.vue";
//本周流行
import FeatureView from "./FeatureView.vue";

//网络请求
import { getHomeGoods } from "../../network/home";

//首页切换服装种类
import tabControl from "@/components/content/tabcontrol/tabControl";
//商品展示
import GoodsList from "@/components/content/goods/GoodsList";
import BackTop from "../../components/content/backtop/BackTop.vue";
//滚动
import scroll from "../../components/common/scroll/Scroll.vue";
export default {
  name: "home",
  data() {
    return {
      titles: ["流行", "新款", "精选"],
      currentType: "pop",
      TabrFixed: false,
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      tabControlTop: null,
      isTabShow: false,
      saveY: 0,
      home_swiper: 0,
    };
  },
  components: {
    navbar,
    Myswiper,
    recommends,
    FeatureView,
    tabControl,
    GoodsList,
    BackTop,
    scroll,
  },
  mounted() {
    //监听滚动条
    window.addEventListener("scroll", this.watchScroll);
  },
  destroyed() {
    //销毁滚动事件
    window.removeEventListener("scroll", this.watchScroll);
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  created() {
    //请求pop，new，sell
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  // 回到定位位置
  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
  },
  // 记录离开首页此时的高度
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY();
  },

  //网络请求
  methods: {
    //吸顶效果
    watchScroll() {
      let scroll =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //目前滚动高度
      // let fixheight = document.querySelector(".tab").offsetTop; //导航栏距离顶部高度
      if (scroll > 686) {
        this.TabrFixed = true;
      } else {
        this.TabrFixed = false;
      }
    },
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
    contentScroll(position) {
      // 1.确定BackTop是否显示
      this.isBackShow = -position.y > 1000;

      // 2.确定TabControl是否吸顶
      this.isTabShow = -position.y > this.tabControlTop - 44;
    },
    loadMore() {
      this.getHomeGoods(this.currentType);
    },
    swiperImageLoad() {
      this.tabControlTop = this.$refs.tabControl1.$el.offsetTop;
    },
    forceRerender() {
      this.home_swiper += 1;
    },
    loadMore() {
      this.getHomeGoods(this.currentType);
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      console.log(page);
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        this.$refs.scroll.finishPullUp();
        console.log(this.goods[type]);
        console.log(this.currentType);
        console.log(this.goods[this.currentType].list.length);
      });
    },
  },
};
</script>

<style scoped>
.wrapper {
  height: 100px;
}
.home {
  text-align: center;
  margin-bottom: 100px;
}
/* 固定导航 */
.fix-tab {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  z-index: 999;
}
.content {
  position: relative;
  z-index: -1;
  height: calc(100% - 84px);
}
.botton {
  position: absolute;
  margin-top: 89px;
}
</style>